import 'dart:async';

import 'package:flutter/material.dart';

class BoxParentPageC extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("box"),
      ),
      body: BoxParentWidgetC(),
    );
  }
}

class BoxParentWidgetC extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _BoxParentWidgetC();
  }
}

class _BoxParentWidgetC extends State<BoxParentWidgetC> {
  bool _active = false;

  void _handleTapboxChange(bool newvalue) {
    setState(() {
      _active = newvalue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new TapBoxC(active: _active, onChanged: _handleTapboxChange),
    );
  }
}

class TapBoxC extends StatefulWidget {
  final bool? active;
  final ValueChanged<bool>? onChanged;

  TapBoxC({Key? key, this.active, @required this.onChanged}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _TapBoxCState();
  }
}

class _TapBoxCState extends State<TapBoxC> {
  bool _hightlight = false;

  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _hightlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _hightlight = false;
    });
  }

  void _handleTapCancel() {
    setState(() {
      _hightlight = false;
    });
  }

  void _handleTap() {
    widget.onChanged!(!widget.active!);
  }

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTapDown: _handleTapDown,
      onTapUp: _handleTapUp,
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: new Container(
        child: new Center(
          child: new Text(
            widget.active! ? 'Active' : 'Inactive',
            style: new TextStyle(
              fontSize: 32,
              color: Colors.white,
            ),
          ),
        ),
        width: 200,
        height: 200,
        decoration: new BoxDecoration(
          color: widget.active! ? Colors.lightGreen[700] : Colors.grey[600],
          border: _hightlight
              ? new Border.all(color: Colors.teal[700]!, width: 10)
              : null,
        ),
      ),
    );
  }
}
